<template>
  <div class="big">
    <div v-for="item in picList" :key="item.id" class="box">
      <div class="two">
        <img :src="item.url" width="200" />
        <!-- <p>{{ item.name }}</p> -->
        <p>
          <el-button link @click="delPic(item)">删除</el-button>
          <el-button link @click="movePic(item)">转移相册</el-button>
        </p>
      </div>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.current"
        :page-sizes="[20, 30, 40, 50]"
        :page-size="pagination.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-radio-group v-model="title.album">
        <el-radio v-for="item in all" :key="item.id" :label="item.id" border>{{
          item.name
        }}</el-radio>
      </el-radio-group>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialog()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style lang="scss">
.big {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.box {
  width: 200px;
  height: 300px;
  border: 1px solid #ccc;
  margin: 10px;
  img {
    width: 100%;
    height: 200px;
    object-fit: contain;
  }
}
</style>
<script>
import { GetPic, EditUpimg, DelPic,GetAblum } from "@/api/assetsdata";
export default {
  name:'PicList',
  data() {
    return {
      search: {size: 20, current: 1},
      picList: [],
      title: {album:''}, //存放图片库
      dialogVisible: false,
      all: [],
      pagination: {},
    };
  },
  created() {
    if (this.$route.params.id != ":id") {
      this.search.album = this.$route.params.id;
    }
    this.getPic();
  },
  methods: {
    // 处理size变化
    handleSizeChange(val) {
      // 当每页多少条发生变化时候，重新更新搜索条件size
      // 重新获取员工列表
      // console.log(`每页 ${val} 条`);
      this.search.size = val;
      this.getPic();
    },
    // 处理current变化
    handleCurrentChange(val) {
      // 当当前页发生变化时候更新 搜索条件的当前页
      // 获取数据
      this.search.current = val;
      this.getPic();
    },
    //删除按钮
    delPic(item) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          DelPic(item.id, this.$route.params.album).then((res) => {
            if (res.data.code == 0) {
              this.$message({
                type: "success",
                message: "删除成功",
              });

              this.getPic();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //转移图片
    movePic(item) {
      this.title = item;
      console.log(this.title);
      this.dialogVisible = true;
      //图片库
      GetAblum({ size: 100 }).then((res) => {
        this.all = res.data.data;
      });
    },
    dialog() {
      this.dialogVisible = false;
      console.log(this.radio);
      EditUpimg(this.title.id, this.title).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            type: "sucess",
            message: "已转移成功",
          });
          this.getPic();
        }
      });
    },
    getPic() {
      GetPic(this.search).then((res) => {
        if (res.data.code === 0) {
          //更新相册列表
          this.picList = res.data.data;
          console.log(this.picList, "图片列表");
          this.pagination = res.data.pagnation;
          this.pagination.current = this.pagination.current * 1;
          this.pagination.size = this.pagination.size * 1;
        }
      });
    },
  },
};
</script>
